<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿小米网站-商品单元块</title>
		<style>
			/* css 内部样式*/
			
			 /* 表示：类名叫做product-wrap的元素 */
			 body {
				background-color: #f4f4f4; 
			 }
			.product-wrap {
				margin: 0 auto;  /*盒子模型*/
				width: 234px;  /* 键值对 */
				height: 300px;
				background-color: #ffffff;
				
			}
			.images{
				width: 160px;
				padding-top:18px;  /* 顶上的内边距 */
				margin: 0 auto;
				
			}
			#mi10 {
				width: 160px;
			}
			.desc{
				text-align: center;
				font-size: 12px;
				color: #b0b0b0;
			}
			.price {
				text-align: center;
				font-size: 12px;
				color: #ff6700;
			}
			.title{
				font-size: 14px;
				font-weight: 400;
				text-align: center;
				color: #333;
				overflow: hidden;   /* 超出div隐藏 */
				white-space: nowrap;  /* 不换行 */
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="product-wrap">
			<div class="images">
				<img id="mi10" src="../../img/0099822e42b4428cb25c4cdebc6ca53d.webp" alt="">
			</div>
			<h3 class="title">宇宙无敌至镶金边尊版京东方克鲁赛德解放啦钻小米10 plus</h3>
			<p class="desc">骁龙865/1亿像素相机</p>
			<p class="price">3999元起</p>
		</div>
	</body>
</html>
